<template>
  <div class="mySalary">
  
    <v-header :userName="userName"></v-header>
   
    <section class='section' v-if='type==1'>
        <template > 

            <h1 class="main_title">{{people || userName}}的工资</h1>


            <div class="main_content">
        
                  <div class="main_guide">
            
                    <el-select v-model="selecteValue" placeholder="请选择" @change="handleSelect">
            
                      <el-option v-if='options' v-for="(item,index) in options" :key="index" :label="item.value" :value="item.value">
            
                      </el-option>
            
                    </el-select>
            
                    <div class="guide_right" @click.stop='type=2'>(按多月份或年度查询)</div>
                    
                  </div>            
            
            			<template v-if="!isNoData">
            				
		                  <div  class="main_info c1" >
		            
		                    <div class="info_head">
		            
		                      <div class="info_head_items times">
		            
		                        <span class="dates">{{selecteValue}}</span>
		            
		                        <span class="currencyCode">货币代码：{{getCurrency()}}</span>
		            
		                      </div>
		            
		                      <div class="info_head_items should">
		            
		                        <span class="txt">应发工资：</span>
		            
		                        <!-- <span class="types">{{getCurrency()}}</span> -->
		            
		                        <span class="moneys">{{res.TotalSalarys && res.TotalSalarys.yfgz  | keepTwoNum}}</span>
		            
		                      </div>
		            
		                      <div class="info_head_items actual">
		            
		                        <span class="txt">实发工资：</span>
		            
		                        <!-- <span class="types">{{getCurrency()}}</span> -->
		            
		                        <span class="moneys">{{res.TotalSalarys && res.TotalSalarys.sfgz | keepTwoNum}}</span>
		            
		                      </div>
		            
		                    </div>
		            
		                    <div class="info_ctn info_ctn1">
		            
		                      <section>
		            
		            
		            
		                        <div>
		            
		                          <div class="top">
		            
		                            <span class="items_name">收入合计</span>
		            
		                            <span class="items-line"></span>
		            
		                            <span class="items_money">
		                              {{res.TotalSalarys && res.TotalSalarys.srhj?res.TotalSalarys.srhj:'0'}}
		                            </span>
		                            
		                            
		                          </div>
		            
		                          <ul class="total_income_list">
		          
		                            <li class="total_income_items" v-for='(k,i) in res.salarys && res.salarys[0].income'>
		            
		                              <div class="total_tittle">{{k.name }}：</div>
		            
		                              <div class="total_num">
		                                {{k.value | keepTwoNum }}
		                                <el-tooltip
		                                   v-if='showTool(k.comment)'
		                                    :content='k.comment'
		                                    effect="light"
		                                   placement="top-start" 
		                                   popper-class='mySalary-tooltip'
		                                  >
		                                  <span class='help'>?</span>
		                                  
		                                </el-tooltip>
		                              </div>
		                            </li>
		            
		                          </ul>
		            
		            
		            
		                        </div>
		            
		            
		            
		                        <div>
		            
		                          <div class="top">
		            
		                            <span class="items_name">扣减合计</span>
		            
		                            <span class="items-line"></span>
		            
		                            <span class="items_money">{{res.TotalSalarys && res.TotalSalarys.kjhj  | keepTwoNum}}
		                              
		                            </span>
		            
		                          </div>
		            
		                          <ul class="total_income_list">
		            
		                            <li class="total_income_items" v-for='(k,i) in res.salarys && res.salarys[0].deduction'>
		            
		                              <div class="total_tittle">{{k.name}}：</div>
		            
		                              <div class="total_num">
		                                {{k.value | keepTwoNum }}
		                                <el-tooltip
		                                   v-if='showTool(k.comment)'
		                                    :content='k.comment'
		                                    effect="light"
		                                   placement="top-start"  
		                                  >
		                                  <span class='help'>?</span>
		                                </el-tooltip>
		                              </div>
		            
		                            </li>
		            
		                          </ul>
		            
		                        </div>
		            
		            
		            
		            
		            
		                        <div class="explain" v-if='res.salarys && res.salarys[0].tax[0]'>
		            
		                          <ul class="explain_list">
		            
		                            <li class="explain_items">
		            
		                              <div class="items_val">应纳税收入：</div>
		            
		                              <div class="items_num">{{res.salarys[0].tax[0].tax.C_AMT008 | keepTwoNum}}</div>
		            
		                            </li>
		            
		                            <li class="explain_items">
		            
		                              <div class="items_val">免税额：</div>
		            
		                              <div class="items_num">{{res.salarys[0].tax[0].tax.C_AMT005 | keepTwoNum}}</div>
		            
		                            </li>
		            
		                            <li class="explain_items">
		            
		                              <div class="items_val">捐赠税：</div>
		            
		                              <div class="items_num">{{res.salarys[0].tax[0].tax.C_AMT002 | keepTwoNum }}</div>
		            
		                            </li>
		            
		                            <li class="explain_items">
		            
		                              <div class="items_val">税率：</div>
		            
		                              <div class="items_num">{{res.salarys[0].tax[0].tax.C_AMT007 || 0}}</div>
		            
		                            </li>
		            
		                            <li class="explain_items">
		            
		                              <div class="items_val">速算扣除法：</div>
		            
		                              <div class="items_num">{{res.salarys[0].tax[0].tax.C_AMT006 | keepTwoNum}}</div>
		            
		                            </li>
		            
		                            <li class="explain_items">
		            
		                              <div class="items_val">个人所得税：</div>
		            
		                              <div class="items_num">{{res.salarys[0].tax[0].tax.C_AMT004 | keepTwoNum }}</div>
		            
		                            </li>
		            
		                          </ul>
		            
		                          <div class="triangle_up" :class='getClass()'></div>
		                         
		            
		                        </div>
		            
		            
		            
		                        <div>
		            
		                          <div class='top'>
		            
		                            <span class="items_name">公司承担社保/MPF</span>
		            
		                            <span class="items-line"></span>
		            
		                            <span class="items_money">{{res.salarys && res.salarys && res.salarys[0].summary.c_MPF }}</span>
		            
		                          </div>
		            
		                          <ul class="total_income_list">
		            
		                            <li class="total_income_items" v-for='(k,i) in res.salarys && res.salarys[0].fund'>
		            
		                              <div class="total_tittle">{{k.name}}：</div>
		            
		                              <div class="total_num">
		                                {{k.value | keepTwoNum }}
		                                <el-tooltip
		                                v-if='showTool(k.comment)'
		                                    :content='k.comment'
		                                    effect="light"
		                                   placement="top-start"  
		                                  >
		                                  <span class='help'>?</span>
		                                </el-tooltip>
		                              </div>
		            
		                            </li>
		            
		                            <li class="total_income_items" v-for='(k,i) in res.salarys && res.salarys[0].mpf'>
		            
		                              <div class="total_tittle">{{k.name}}：</div>
		            
		                              <div class="total_num">
		                                {{k.value | keepTwoNum }}
		                                <el-tooltip
		                                v-if='showTool(k.comment)'
		                                    :content='k.comment'
		                                    effect="light"
		                                   placement="top-start"  
		                                  >
		                                  <span class='help'>?</span>
		                                </el-tooltip>
		                              </div>
		            
		                            </li>
		            
		                          </ul>
		            
		                        </div>
		            
		            
		            
		                        <div>
		            
		                          <div class="top">
		            
		                            <span class="items_name">人工成本合计</span>
		            
		                            <span class="items-line"></span>
		            
		                            <span class="items_money">{{res.TotalSalarys && res.TotalSalarys.rgcbhj | keepTwoNum}}</span>
		            
		                          </div>
		            
		            
		            
		                        </div>
		            
		            
		                      </section>
		            
		                    </div>
		            
		                  </div>
							                    							
            			
            			
            			</template>

					        <div v-else>
					            <div class="imgBox"><img src="/static/images/nodata.svg" alt=""></div>
					            <p class="data">暂无数据</p>
					        </div>        
            </div>
        </template> 
  
    </section>
  

    <section class='section' v-if='type==2'>
  
  
  
      <h1 class="main_title">{{people || userName}}的工资</h1>
  
  
  
      <div class="main_content">
  
        <div class="main_guide">
  
          <div class="guide_left" @click.stop='type=1'>(按当前月查询)</div>
  
          <div class="block guide_right">
  
  
  
            <el-date-picker v-model="startDate" type="month" placeholder="开始日期" format='yyyy-MM' value-format='yyyy-MM' @change='handleStartDate' :picker-options="pickerOptions">
  
  
  
            </el-date-picker>
  
            <span class="demonstration">-</span>
  
            <el-date-picker v-model="endDate" align="right" type="month" placeholder="结束日期" format='yyyy-MM' value-format='yyyy-MM' :picker-options="pickerOptions" @change='handleEndDate'>
  
            </el-date-picker>
  
            <el-button type="primary" @click.stop='search' style='position:relative;top:1px'>搜索</el-button>
  
          </div>
  
        </div>
  
        <div class="main_info c2">
  
          <div class="main_info tabletable">
  
            <div class="info_head2 info_head">
  
              <div class="info_head_items times">
  
                <span class="dates">{{startDate2}} ~ {{endDate2}}</span>
  
              </div>
  
              <div class="info_head_items should" :class='{"text-center":type==2}'>
  
                <span class="txt">应发总工资：</span>
  
                <!-- <span class="types">{{getCurrency()}}</span> -->
  
                <span class="moneys">{{resType1.TotalSalarys && resType1.TotalSalarys.yfgz  | keepTwoNum}}</span>
  
              </div>
  
              <div class="info_head_items actual">
  
                <span class="txt">实发总工资：</span>
  
                <!-- <span class="types">{{getCurrency()}}</span> -->
  
                <span class="moneys">{{resType1.TotalSalarys && resType1.TotalSalarys.sfgz | keepTwoNum}}</span>
  
              </div>
  
            </div>
  
            <div class='info_body'>
  
              <p>
  
                <span>· 收入总合计</span>
  
                <span>· 扣减合计</span>
  
                <span>· 人工成本合计</span>
  
                <span>· 公司承担社保/MPF</span>
  
                <span>· 货币代码</span>
  
              </p>
  
              <p>
  
                <span>{{resType1.TotalSalarys && resType1.TotalSalarys.srhj | keepTwoNum}}</span>
  
                <span>{{resType1.TotalSalarys && resType1.TotalSalarys.kjhj | keepTwoNum}}</span>
  
                <span>{{resType1.TotalSalarys && resType1.TotalSalarys.rgcbhj | keepTwoNum}}</span>
  
                <span>{{resType1.TotalSalarys && resType1.TotalSalarys.srhj | keepTwoNum }}</span>
  
                <span>{{getCurrency()}}</span>
  
              </p>
  
  
  
            </div>
  
          </div>
  
          <div class="info_ctn c2-info-ctn">
  
            <el-collapse v-model="c2active">
  
              <el-collapse-item :name='i' v-for='(k,i) in resType1.salarys'>
  
                <template slot="title">
  
                    <span class="c2-items-money">应发工资： {{k.summary.c_GROSS_AMT | keepTwoNum }}</span>

                    <span class="c2-items-money">实发工资： {{k.summary.c_NET_PAY | keepTwoNum }}</span>
                    
                    <span class="c2-items-money">{{k.summary.cal_PRD_ID}}</span>
  
  
                </template>

                    <div>
                      <div class="top">
                        <span class="items_name">收入合计</span>
                        <span class="items-line"></span>
                        <span class="items_money">{{k.summary.c_GROSS_AMT | keepTwoNum }}</span>
                      </div>
                      <ul class="total_income_list">
                        <li 
                          v-if='k.income'
                          v-for='(q,j) in k.income'
                           class="total_income_items"
                          >
                          <div class="total_tittle">{{q.name}}：</div>
                          <div class="total_num">{{q.value | keepTwoNum }}
                            <el-tooltip
                            v-if='showTool(q.comment)'
                              :content='q.comment'
                              effect="light"
                             placement="top-start"  
                            >
                            <span class='help'>?</span>
                          </el-tooltip>
                          </div>
                        </li>
                      
                      </ul>
                    </div>
                    <div>
                      <div class="top">
                        <span class="items_name">扣减合计</span>
                        <span class="items-line"></span>
                        <span class="items_money">{{k.summary.c_DDCT_AMT | keepTwoNum }}</span>
                      </div>
                      <ul class="total_income_list">
                        <li class="total_income_items" v-for='(a,b) in k.deduction'>
                          <div class="total_tittle">{{a.name}}：</div>
                          <div class="total_num">{{a.value | keepTwoNum }}
                            <el-tooltip
                            v-if='showTool(a.comment)'
                              :content='a.comment'
                              effect="light"
                             placement="top-start"  
                            >
                            <span class='help'>?</span>
                      </el-tooltip>
                          </div>
                        </li>
                      </ul>
                      <div class="explain" v-if='k.tax'>
                        <ul class="explain_list">
                          <li class="explain_items total_income_items">
                            <div class="total_tittle">应纳税收入：</div>
                            <div class="total_num last">{{k.tax[0].tax.C_AMT008 | keepTwoNum }}</div>
                          </li>
                          <li class="explain_items total_income_items">
                            <div class="total_tittle">免税额：</div>
                            <div class="total_num last">{{k.tax[0].tax.C_AMT005 | keepTwoNum }}</div>
                          </li>
                          <li class="explain_items total_income_items">
                            <div class="total_tittle">捐赠税</div>
                            <div class="total_num">{{k.tax[0].tax.C_AMT002 | keepTwoNum }}</div>
                          </li>
                          <li class="explain_items total_income_items">
                            <div class="total_tittle">税率：</div>
                            <div class="total_num">{{k.tax[0].tax.C_AMT007 }}</div>
                          </li>
                          <li class="explain_items total_income_items">
                            <div class="total_tittle">速算扣除法：</div>
                            <div class="total_num">{{k.tax[0].tax.C_AMT006 | keepTwoNum }}</div>
                          </li>
                          <li class="explain_items total_income_items">
                            <div class="total_tittle">个人所得税：</div>
                            <div class="total_num">{{k.tax[0].tax.C_AMT004 | keepTwoNum }}</div>
                          </li>
                         </ul>
                         <div class="triangle_up" :class='getClass2(k)'></div>
                      </div>
                                      

                    </div>
                    <div>
                      <div class="top">
                        <span class="items_name">公司承担社保/MPF</span>
                        <span class="items-line" style="width:78%"></span>
                        <span class="items_money">{{k.summary.c_MPF | keepTwoNum }}</span>
                      </div>
                      <ul class="total_income_list">
                        <li class="total_income_items"
                            v-for='(q,j) in k.fund'
                            >

                          <div class="total_tittle">{{q.name}}</div>
                          <div class="total_num">
                            {{q.value | keepTwoNum }}
                            <el-tooltip
                            v-if='showTool(q.comment)'
                              :content='q.comment'
                              effect="light"
                             placement="top-start"  
                            >
                              <span class='help'>?</span>
                            </el-tooltip>
                          </div>
                        </li>
                    
                      </ul>
                    </div>  
                    <div>
                      <div class="top">
                        <span class="items_name">人工成本合计 </span>
                        <span class="items-line"></span>
                        <span class="items_money">{{k.summary.c_LABORCOST | keepTwoNum }}</span>
                      </div>
                    </div>

                  
              </el-collapse-item> 
             
            </el-collapse>
          </div>
        
        </div>

       
      </div>
      
    </section>
      
  </div>
 
  </template>
  
</template>

<script>
import Vue from "vue";

import {
  Collapse,
  CollapseItem,
  Tooltip,
  Select,
  Option,
  DatePicker,
  Message
} from "element-ui";

import header from "@/components/employee/header";

Vue.use(Collapse);

Vue.use(CollapseItem);

Vue.use(Tooltip);

Vue.use(Select);

Vue.use(Option);

Vue.use(DatePicker);

export default {
  name: "mySalary",

  data() {
    let that = this;

    return {
      userName: null,

      options: [],

      selecteValue: "",

      rangeStart: "",

      rangeEnd: "",
      userName: localStorage.getItem("userName"),

      pickerOptions: {
//      disabledDate(time) {
//        let start = `${that.rangeStart}-01`;
//
//        let end = `${that.rangeEnd}-01`;
//
//        return (
//          time.getTime() < new Date(start).getTime() ||
//          time.getTime() > new Date(end).getTime()
//        );
//      }
      },

      isNoData: false,
      isNoData1: false,

      type: 1,

      startDate: "",

      endDate: "",

      startDate2: "",

      endDate2: "",
      
      startDateSave:'',
      
      endDate2Save:'',

      c2active: [],

      c2activeChild: [],

      res: [],
      
      resType1:[],

      people: null
    };
  },

  filters: {
    keepTwoNum: function(value) {
        if (!value) {
            return '0.00';
        }
        var value=Math.round(parseFloat(value)*100)/100;
        var xsd=value.toString().split(".");
        if(xsd.length==1){
            value=value.toString()+".00";
            return value;
        }
        if(xsd.length>1){
            if(xsd[1].length<2){
                value=value.toString()+"0";
            }
            return value;
        }
        
    }
  },

  methods: {
    showTool(val) {
      if (val) {
        if (!val.toString().trim()) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },

    getClass() {
      if (this.res.salarys.length && this.res.salarys[0].deduction.length) {
        let len = this.res.salarys[0].deduction.length;
        let gongxinshui = this.res.salarys[0].deduction.filter(
          ele => ele.name == "工薪税"
        ).length;
        if (!gongxinshui) {
          return "display-none";
        } else if (len % 3 == 1) {
          return "arrow-left";
        } else if (len % 3 == 2) {
          return "arrow-center";
        } else if (len % 3 == 0) {
          return "arrow-right";
        } else {
          return "";
        }
      } else {
        return "display-none";
      }
    },

    getClass2(k) {
      if (k.deduction.length) {
        let len = k.deduction.length;
        let gongxinshui = k.deduction.filter(ele => ele.name == "工薪税").length;
        if (!gongxinshui) {
          return "display-none";
        } else if (len % 3 == 1) {
          return "arrow-left";
        } else if (len % 3 == 2) {
          return "arrow-center";
        } else if (len % 3 == 0) {
          return "arrow-right";
        } else {
          return "";
        }
      } else {
        return "display-none";
      }
    },

    getCurrency: function() {
      var result;

      result =
        this.res.salarys &&
        this.res.salarys.length > 0 &&
        this.res.salarys[0].summay
          ? this.res.salarys[0].summay.currency_CD
          : "CNY";

      return result;
    },

    handleStartDate(vals) {
      this.startDateSave = vals && `${vals.split("-")[0]}/${vals.split("-")[1]}`;
    },

    handleEndDate(val) {
      this.endDate2Save = val && `${val.split("-")[0]}/${val.split("-")[1]}`;
    },

    search() {
    	
    	this.startDate2 = this.startDateSave;
    	this.endDate2 = this.endDate2Save;
    	
      if (this.startDate2 && this.endDate2) {
        if (this.startDate.getTime() <= this.endDate.getTime()) {
          this.c2active = [];
          let params = {
              beginDate: this.startDate2,
              endDate: this.endDate2
          };

          this.Axios.Post(this.URL.getEmployeeSalary.url, params).then(res => {
            var result = res.data.datas;

            if (
              (result.salarys && result.salarys.length == 0)
            ) {
              this.isNoData1 = true;
              
            }else {
		        	this.isNoData1 = false;
		        }
            
            this.resType1 = result;

            if (result.salarys.length) {
              result.salarys.forEach((ele, index, arr) => {
                if (ele.deduction.length) {
                  for (let j = 0; j < ele.deduction.length; j++) {
                    if (ele.deduction[j].name == "工薪税") {
                      let del = ele.deduction.splice(j, 1);

                      ele.deduction.push(del[0]);
                    }
                  }
                }
              });

              this.resType1.salarys = result.salarys;
            }
          });
        } else {
          Message({
            message: "请从低到高选择日期区间",

            type: "warning"
          });
        }
      } else {
        Message({
          message: "请选择日期",

          type: "warning"
        });
      }
    },

    handleSelect(val) {
    	console.log(val,'value');
    	
      let params = {
        beginDate: val,

        endDate: val
      };

      this.Axios.Post(this.URL.getEmployeeSalary.url, params).then(res => {
        var result = res.data.datas;
					
        if (
          (result.salarys && result.salarys.length == 0)
        ) {
          this.isNoData = true;
          
        } else {
        	this.isNoData = false;
        }


        this.res = result;

        if (result.salarys.length && result.salarys[0].deduction.length) {
          result.salarys[0].deduction.forEach((ele, i, arr) => {
            if (ele.name == "工薪税") {
              arr.splice(i, 1);
              arr.push(ele);
            }
          });

          this.res.salarys = result.salarys;
          console.log(this.isNoData,"isNoData");
        }
      });
    },

    initParamData(startDate,endDate){
        var params;
        if (!startDate || !endDate) {
              var  months = new Date().getMonth() + 1;

              months = months >= 10 ? months : "0" + months;

              var  years = new Date().getFullYear();
              
							this.startDate2 = this.endDate2 = `${years}/${months}`;
							
														
							for (var i=6;i>0;i--) {
								  if (months - 1 >= 0) {
								  		var newMonth = months - 0;
								  		newMonth = newMonth >= 10 ? newMonth : "0" + newMonth;
				              this.options.push({
				                value: `${years}/${newMonth}`
				              });		
				              months --;
								  } else {
								  		months = 12;
								  		years--;
				              this.options.push({
				                value: `${years}/${12}`
				              });		
				              months --;
								  }

							}

							

        } else {
              params = {
                  beginDate: startDate,
                  endDate:  endDate              
              }
        }

        return params;
    },

    initSalaryAjax(url,params){

        this.Axios.Post(url, params).then(res => {

          // var resu = {"status":1,"message":"查询成功","total":1,"datas":{"TotalSalarys":{"sfgz":59116.35,"kjhj":7527.65,"srhj":66644.0,"rgcbhj":79300.47,"yfgz":66644.0,"gssdsb_mpf":79300.47},"salarys":[{"id":"5a3b89f5f8060ead7869da5b","summary":{"cal_PRD_ID":"2017/12","c_NET_PAY":"59116.35","c_GROSS_AMT":"66644","c_DDCT_AMT":"7527.65","c_LABORCOST":"79300.47","currency_CD":"HKD","empl_RCD":"0","emplid":"10000213","name":"彭晓辉","gp_PAYGROUP":"01_JT_ZB_2","rslt_SEG_NUM":"1","cal_RUN_ID":"01_JT_ZB_2 201712","cal_ID":"PAY 2017/12","orig_CAL_RUN_ID":"01_JT_ZB_2 201712","c_PAYDAY_TYPE":"GY PAY HK","seg_END_DT":"2017-12-31 00:00:00","c_MPF":"12656.47","job_INDICATOR":"P","seg_BGN_DT":"2017-12-01 00:00:00"},"income":[{"name":"基本工资","value":"32700","comment":""},{"name":"年度双薪","value":"29744","comment":" "},{"name":"全勤奖","value":"1000","comment":" "},{"name":"探亲假补贴","value":"750","comment":"探亲假补贴"},{"name":"配偶津贴","value":"2450","comment":"配偶补贴"}],"deduction":[{"name":"员工宿舍费个人缴交","value":"127.8","comment":" "},{"name":"扣缴内派员工住房公积金","value":"4401.55","comment":" "},{"name":"扣缴内派员工医疗保险","value":"528.19","comment":" "},{"name":"扣缴内派员工养老保险","value":"2112.75","comment":" "},{"name":"扣缴内派员工失业保险","value":"12.53","comment":" "},{"name":"企业年金个人","value":"344.83","comment":""}],"fund":[],"tax":null,"mpf":[{"name":"内派员工养老保险-个人","value":"2112.75","comment":" "},{"name":"内派员工养老保险-公司","value":"3697.3","comment":" "},{"name":"内派员工医疗保险-个人","value":"528.19","comment":" "},{"name":"内派员工医疗保险-公司","value":"1637.38","comment":" "},{"name":"内派员工失业保险-个人","value":"12.53","comment":" "},{"name":"内派员工失业保险-公司","value":"25.07","comment":" "},{"name":"内派员工工伤保险-公司","value":"73.94","comment":" "},{"name":"内派员工生育保险-公司","value":"132.05","comment":" "},{"name":"内派员工住房公积金-个人","value":"4401.55","comment":" "},{"name":"内派员工住房公积金-公司","value":"4401.55","comment":" "},{"name":"企业年金个人","value":"344.83","comment":""},{"name":"企业年金公司","value":"2689.18","comment":""}]}],"salaryComprise":[{"id":"5a3b8231f8060ead7866151c","comp_RATECD":"BASEP","comp_FREQUENCY":"M","comprate":"32700","effseq":"0","currency_CD":"HKD","frequency_DESCR":"每月","hr_STATUS":"A","empl_RCD":"0","effdt":"2017-06-01 00:00:00","emplid":"10000213","name":"彭晓辉","descr":"基本工资（香港）"}],"years":["2017/12","2017/11","2017/10","2017/09","2017/08","2017/07","2017/06","2017/05","2017/04","2017/03","2017/02","2017/02","2017/01"]},"page":null,"token":null}
          // var result = resu.datas;

          
          var result = res.data.datas;


				       

//        if (result.years.length) {
//
//          let range = result.years;
//          
//          this.rangeStart = range[range.length - 1];
//
//          this.rangeEnd = range[0];
//
//          this.rangeStart = this.rangeStart.replace("/", "-");
//
//          this.rangeEnd = this.rangeEnd.replace("/", "-");
//
//          range.forEach((ele, i) => {
//            this.options.push({
//              value: `${result.years[i]}`
//            });
//          });
//
//          this.selecteValue = `${this.options[0].value}`;
//						this.startDate2 = this.endDate2 = this.selecteValue;
//
//        }


          if (
            (result.salarys && result.salarys.length == 0)
          ) {
              this.isNoData = true;
              return;
          } else {
        			this.isNoData = false;
        	}


          this.res = result;
          if (result.salarys.length && result.salarys[0].deduction.length) {
            result.salarys[0].deduction.forEach((ele, i, arr) => {
              if (ele.name == "工薪税") {
                arr.splice(i, 1);
                arr.push(ele);
              }
            });

            this.res.salarys = result.salarys;
          }
          
          this.people = result.salarys[0].summary.name;

        });

    }


  },

  components: {
    "v-header": header
  },

  created() {

    this.userName = localStorage.getItem("userName");

    this.initParamData();
    this.selecteValue = this.startDate2;
    var params = {
          beginDate: this.startDate2,
          endDate:  this.endDate2       	
    }

    this.initSalaryAjax(this.URL.getEmployeeSalary.url, params);



  }
};
</script>

<style lang='less'>
.mySalary-tooltip {
  transform: translateY(-50px) translateX(-2px);
}

.help {
  display: inline-block;

  background-color: #89abc6;

  font-size: 14px;

  border-radius: 50%;

  height: 16px;

  line-height: 16px;

  width: 16px;

  margin-left: 10px;

  color: #fff;

  cursor: pointer;

  font-style: normal;

  font-weight: normal;

  text-align: center;
}
.el-collapse-item .el-collapse {
  border: 0;
}

.el-collapse-item__header {
  overflow: hidden;
}

.el-collapse-item__header .c2-items-money:nth-of-type(2) {
  float: right;

  margin-right: 130px;
}

.el-collapse-item__header .c2-items-money:last-of-type {
  float: left;
  margin-right: 340px;
}

.info_body {
  border: 1px solid #38f;

  border-top: 0px;
}

.info_body p {
  display: flex;

  justify-content: space-around;
}

.info_body span {
  flex: 3;

  border-right: 1px solid #f1f1f1;

  text-align: center;

  padding: 12px 0;

  color: #38f;
}

.el-date-editor.el-input {
  width: 120px !important;
}

.mySalary {
  background: #eee;
}

.mySalary .arrow-left {
  left: 20%;
}

.mySalary .arrow-center {
  left: 52%;
}

.mySalary .arrow-right {
  left: 84%;
}

.mySalary .display-none {
  display: none;
}

.mySalary .emp_head {
  height: 50px;

  background: #3c8dbc;

  line-height: 50px;

  text-align: center;

  color: #fff;
}

.mySalary .section {
  background: #fff;

  margin-top: 50px;
}
.mySalary .section:before {
  background: #fff;
  content:' ';
	top:0;
	bottom:0;
	left:0;
	right:0;
}


.mySalary .section .main_title {
  margin-top: 20px;

  text-align: center;

  height: 80px;

  line-height: 80px;

  font-size: 21px;
}

.mySalary .section .main_content {
  margin: 0 100px 40px;
}

.mySalary .section .main_guide {
  overflow: hidden;

  line-height: 35px;
}

.mySalary .section .main_guide .fa-caret-down {
  font-size: 25px;

  margin-left: 10px;

  position: relative;

  top: 5px;

  color: #999;
}

.mySalary .section .main_guide .guide_left {
  width: 50%;

  float: left;

  color: #38f;

  cursor: pointer;
}

.mySalary .section .main_guide .guide_right {
  width: 50%;

  float: right;

  text-align: right;

  color: #38f;

  cursor: pointer;
}

.mySalary .section .main_content .main_info {
  padding-top: 20px;

  border-radius: 4px;
}

.mySalary .section .main_content .main_info .info_head {
  height: 50px;

  line-height: 50px;

  background: #38f;

  padding: 0 20px;

  border-radius: 5px;

  color: #fff;

  font-size: 16px;

  overflow: hidden;
}

.mySalary .section .main_content .main_info .info_head2 {
  border-radius: 5px 5px 0 0;
}

.mySalary .section .info_head .info_head_items {
  width: 33.3%;

  float: left;
}

.mySalary .section .main_content .currencyCode {
  float: right;
}

.mySalary .section .main_content .info_head .actual {
  text-align: right;
}

.mySalary .section .main_content .info_head .should {
  text-align: right;
}

.mySalary .info_ctn {
  margin-top: 30px;
}

.info_ctn1 .el-collapse {
  border: 0;
}

.el-collapse {
  border: 1px solid #dfe6ec;

  border-radius: 5px !important;

  padding: 0 5px;
}

.mySalary .el-collapse-item {
  position: relative;
}

.mySalary .el-collapse-item .items_name {
  margin-right: 15px;

  font-weight: 900;
}

.mySalary .top {
  padding: 0 15px;

  overflow: hidden;
}

.mySalary .total_income_list {
  margin: 0 15px;
}

.mySalary .top .items_name {
  margin-right: 15px;

  font-weight: 900;
}

.mySalary .el-collapse-item .items_line {
  display: inline-block;

  width: 83%;

  height: 1px;

  background: #ccc;

  position: absolute;

  top: 24px;
}

.mySalary .el-collapse-item .items_money {
  display: inline-block;

  background: #fff;

  position: absolute;

  right: 30px;

  text-align: center;

  padding: 0 15px;

  font-weight: 900;

  color: #38f;

  height: 49px;
}

.mySalary .top .items_money {
  display: inline-block;

  background: #fff;

  text-align: center;

  padding: 0 15px;

  font-weight: 900;

  color: #38f;

  height: 49px;

  float: right;

  position: relative;

  z-index: 99;
}

.mySalary .top {
  position: relative;
  overflow: hidden;
}

.mySalary .top .items-line {
  width: 83%;

  height: 1px;

  background-color: #ccc;

  display: inline-block;

  position: absolute;

  top: 9.3px;
}

.mySalary .el-collapse-item__header {
  height: 50px;

  line-height: 50px;
}

.mySalary .el-collapse-item__wrap {
  background: #fff;
}

.mySalary .el-collapse-item .division_line {
  position: absolute;

  width: 90%;

  height: 2px;

  background: #ccc;

  top: 23px;
}

.mySalary .el-collapse-item .money_num {
  position: absolute;

  right: 20px;

  top: 10px;
}

.mySalary .el-collapse-item__header__arrow {
  position: absolute;

  right: 0;

  top: 18px;
}

.mySalary .info_ctn .total_income_list {
  margin-bottom: 25px;

  overflow: hidden;
}

.mySalary .info_ctn .total_income_list .total_income_items {
  height: 40px;

  line-height: 40px;

  float: left;
}

// .mySalary .info_ctn .total_income_list .left {
//   width: 33%;
// }

.mySalary .total_income_list .payroll_tax {
  position: relative;
}

.mySalary .total_income_list .query_payroll_tax {
  color: #38f;

  position: absolute;

  left: 60px;

  top: 0;

  width: 200px;
}

.mySalary .total_income_list .query_payroll_tax .fa-caret-down {
  margin-right: 10px;

  font-size: 25px;

  position: relative;

  top: 5px;
}

// .mySalary .info_ctn .total_income_list .center {
//   width: 33%;
// }

.mySalary .info_ctn .total_income_list li,
.total_income_items {
  width: 33%;
}

// .mySalary .info_ctn .total_income_list li:nth-of-type(3n),
// .total_income_items:nth-of-type(3n) {
//   width: 30%;
// }
.total_tittle {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mySalary .info_ctn .question_tip {
  text-align: center;
}

// .mySalary .info_ctn .total_income_list .right {
//   width: 30%;
// }

.mySalary .info_ctn .total_income_items .total_tittle {
  float: left;

  width: 58%;

  padding-left: 5px;

  color: #999;
}

.mySalary .info_ctn .total_income_items .total_num {
  float: left;

  text-align: center;

  font-weight: 900;
}

.mySalary .info_ctn .total_num .fa-question-circle {
  color: #89abc6;

  margin-left: 5px;
}

.mySalary .info_ctn .total_income_items .last {
  text-align: right;

  padding-right: 10px;
}

.mySalary .info_ctn .explain {
  background: #f8f8f8;

  padding: 10px 20px;

  position: relative;

  border-radius: 4px;

  margin-bottom: 25px;
}

.text-center {
  text-align: center !important;
}

.mySalary .info_ctn .explain .explain_list {
  overflow: hidden;
}

.mySalary .info_ctn .explain .explain_list .explain_items {
  float: left;

  width: 33.3%;

  height: 40px;

  line-height: 40px;
}

.mySalary .explain .explain_list .items_val {
  float: left;

  width: 50%;

  text-align: left;

  padding-left: 20px;
}

.mySalary .explain .explain_list .items_num {
  float: left;

  width: 30%;

  text-align: right;
}

.mySalary .explain .triangle_up {
  position: absolute;

  top: -14px;

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-bottom: 20px solid #f8f8f8;
}

.mySalary div.imgBox {
  background-color: rgba(0, 0, 0, 0.01);
  text-align: center;
  border-radius: 50%;
  padding: 60px;
  width: 320px;
  height: 320px;
  line-height: 320px;
  margin: 0 auto;
  margin-top: 160px;
}
.mySalary div.imgBox img {
  display: inline-block;
  height: 200px;
  width: 200px;
}
.mySalary p.data {
  margin-top: 25px;
  text-align: center;
}
</style>
